//用find()查找
var ul = $("ul.lang");
var li = ul.find(".dy");
console.log(li);
var swf = ul.find("#swift");
console.log(swf);
var hsk = ul.find("[name=haskell]");
console.log(hsk);

//如果要从当前节点开始向上查找，使用parent()方法：
var parent = swf.parent();
console.log(parent);

var a = swf.parent(".red");
console.log(a);

var ul = $("ul.lang li").get();
console.log(ul);

// 对于位于同一层级的节点，可以通过next()和prev()方法，例如：

// 当我们已经拿到Swift节点后：

var swift = $("#swift");

swift.next(); // Scheme   next()获取下一个
swift.next("[name=haskell]"); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swift.prev(); // Python    prew（）获取上一个
swift.prev(".dy"); // Python，因为Python同时符合过滤器条件.dy

console.log("---------------------------");

//filter()方法可以过滤掉不符合选择器条件的节点
var ul = $("ul.lang li");
console.log(ul);
var li = ul.filter(".dy");
console.log(li);

//或者传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象：
// var b = ul.filter(function() {
//     return this.innerHTML.indexof('s') === 0
// })

// console.log(b);

//map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var c = ul
    .map(function() {
        return this.innerHTML;
    })
    .get();

console.log(c);

// 此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉：

var langs = $("ul.lang li"); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

("use strict");
var json = null;
json = $("#test-form");
console.log(json);
// 显示结果:
if (typeof json === "string") {
    console.log(json);
} else {
    console.log("json变量不是string!");
}

console.log("操作DOM-----------------------------------");
// 修改Text和HTML
// jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，
var a = $('#test-ul li[name=book]').text()
console.log(a);
var d = $('#test-ul li[name=book]').html()
console.log(d);
//修改CSS
var c=$('#test-ul li.js')
var d=$('#test-ul li[name=book]')
c.html('<div style =color:red>javascript</div>')
d.text('Java &amp; JavaScript')
//要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现：
$('#test-css li.dy').css('background-color','blue')

// 注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

// jQuery对象的css()方法可以这么用：

// var div = $('#test-div');
// div.css('color'); // '#000033', 获取CSS属性
// div.css('color', '#336699'); // 设置CSS属性
// div.css('color', ''); // 清除CSS属性

// 为了和JavaScript保持一致，CSS属性可以用'background-color'和'backgroundColor'两种格式。

// css()方法将作用于DOM节点的style属性，具有最高优先级。如果要修改class属性，可以用jQuery提供的下列方法
var div = $('#test-css');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('C++'); // 添加highlight这个class
div.removeClass('java');


//练习：分别用css()方法和addClass()方法高亮显示JavaScript：
var div = $('#test-highlight-css');
div.find('.js').css('backgroundColor','red')


///显示和隐藏DOM
var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示


/*
获取DOM信息
利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
//attr()和removeAttr()方法用于操作DOM节点的属性：

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined
*/
attr()和prop()对于属性checked处理有所不同：

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

prop()返回值更合理一些。不过，用is()方法判断更好：

var radio = $('#test-radio');
radio.is(':checked'); // true
类似的属性还有selected，处理时最好用is(':selected')。


操作表单
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'